<template>
  <div class="detail">
    <!-- 头部banner -->
    <hdbanner v-if="articleData.title" :t="articleData.title" :b="articleData.intro"></hdbanner>
    <!-- markdown 内容 -->
    <div class="articleBody">
      <div class="content" ref="scroll">
        <showMark :text="articleData.content" @btnClick="getchange"></showMark>
      </div>
    </div>
    <!-- 目录 -->
    <div class="catalogue_hd">
      <el-tree class="catalogue" :data="treeList" :props="defaultProps" default-expand-all @node-click="goform"></el-tree>
    </div>
    <div class="comment">
      <div class="comment_body">
        <div class="comment_list">
          <el-divider content-position="left">{{ (total || 0) + ' 条评论' }}</el-divider>
          <el-divider content-position="right"><el-button type="primary" @click="reply()">评论</el-button></el-divider>
          <div v-for="(item, index) in commentList" :key="'commentList' + index" class="comment_item">
            <div class="user_portrait">
              <!-- 头像 -->
              <img :src="item.user_pic || require('@/assets/static/img/my.png')">
            </div>
            <div class="user_body">
              <div class="info">
                <!-- 名称 -->
                <div class="username">
                  {{ item.nickname }}
                </div>
                <!-- 内容 -->
                <div class="userdetail">
                  {{ item.content }}
                </div>
              </div>
              <div class="operation">
                <div class="date iconfont icon-shijianchuo "></div><span>{{ $moment(item.date, 'YY-MM-DD')
                }}</span>
                <div class="say iconfont icon-pinglun"></div><span>{{ item.childs.length }}</span>
                <div class="reply"><span @click="reply(item)">回复</span></div>
              </div>
              <div class="comment_item" v-for="(item2, index2) in item.childs" :key="'childs' + index2">
                <div class="user_portrait">
                  <img :src="item2.user_pic || require('@/assets/static/img/my.png')">
                </div>
                <div class="user_body">
                  <div class="info">
                    <div class="username">
                      {{ item2.nickname + '@' + item2.tagname }}
                    </div>
                    <div class="userdetail">
                      {{ item2.content }}
                    </div>
                  </div>
                  <div class="operation">
                    <div class="date iconfont icon-shijianchuo "></div>
                    <span>{{ $moment(item2.date, 'YY-MM-DD') }}</span>
                    <!-- <div class="say iconfont icon-pinglun"></div><span>{{ item2.childs.length }}</span> -->
                    <div class="reply"><span @click="reply(item2)">回复</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="评论" :visible.sync="dialogVisible" width="400px" @close="close">
      <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 7 }" placeholder="请输入内容" v-model="textarea2">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCommontById, addComment, getArticleInfo, addPageview } from "@/api";
import hdbanner from "@/components/hdbanner";
import showMark from "@/components/showMark";
export default {
  name: 'detail',
  components: {
    hdbanner,
    showMark
  },
  data() {
    return {
      textarea2: '',
      dialogVisible: false,
      dialogRow: null,
      total: 0,
      commentList: [],
      previoustree: null,
      treeList: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tocData: '',
      flag: true,
      articleData: [],
    }
  },
  mounted() {
    this.getArticleInfo()
    this.getCommontById()
  },
  methods: {
    getArticleInfo() {
      getArticleInfo({ article_id: this.$route.params.id }).then(res => {
        this.articleData = res.data.results
      })
    },
    close() {
      this.dialogRow = null
      this.textarea2 = ''
    },
    submit() {
      // 判断有没有登录
      if (!this.$store.state.userInfo) return this.$message.error('请先登录！')
      if (!this.$store.state.userInfo.state) return this.$message.error('请先登录！')
      // 判断输入是空
      if (!this.textarea2) return this.$message.error('请输入！')
      let body = {}
      if (this.dialogRow) {
        // 回复模式
        body.articleid = this.$route.params.id //当前文章id
        body.lastid = this.dialogRow.lastid != -1 ? this.dialogRow.lastid : this.dialogRow.comment_id // 上级id
        body.userid = this.$store.state.userInfo.user_id// 当前用户id
        body.targetid = this.dialogRow.userid //目标id
        body.date = this.$moment(Date.now())
        body.content = this.textarea2
      } else {
        // 新增模式
        body.articleid = this.$route.params.id //当前文章id
        body.lastid = -1 // 上级id
        body.userid = this.$store.state.userInfo.user_id// 当前用户id
        body.targetid = -1 //目标id
        body.date = this.$moment(Date.now())
        body.content = this.textarea2
      }
      addComment(body).then(res => {
        if (!res.data.status) {
          this.$message.error('发布失败')
        } else {
          this.dialogVisible = false
          this.getCommontById()
          this.$message.success('发布成功')
        }
      })

    },
    reply(row) {
      // 打开弹窗
      this.dialogRow = null
      this.dialogVisible = true
      this.dialogRow = row
    },
    getCommontById() {
      getCommontById({ article_id: this.$route.params.id }).then(res => {
        this.commentList = res.data.data
        this.total = res.data.total
      }).then(() => {
        addPageview({ article_id: this.$route.params.id })
      })
    },
    getchange(treeList) {
      this.treeList = treeList;
    },
    goform(data, node, mydata) {
      // 取消高亮


      // console.log(data,node,mydata.get);
      let id = data.id
      let tag = 'h-' + id
      console.log(this.previoustree);

      if (this.previoustree) {

        this.previoustree.style.color = '#000'
      }
      this.previoustree = document.getElementById(tag)
      this.previoustree.style.color = '#1890ff'
      let anchorH = this.previoustree.offsetTop // 得到h标签的位置
      this.changeHeight(anchorH)

      console.log('--');
    },
    changeHeight(record) {
      record -= 80;
      let el = document.documentElement

      let cur = el.scrollTop  // el-scrollbar获取页面当前位置的属性，定位也是通过改变这个

      let flag = false

      let step = 20
      // 由于有可能是向上滑，有可能向下滑，所以需要考虑移动的正负
      if (record < cur) {
        step = -step;
        flag = true
      } else if (record == cur) {
        return
      }

      // 设置动画
      // 具体含义就是按照每8毫秒执行一次向上移动指定的步长，这样就是一个动画
      var timer = setInterval(() => {
        if (flag) {
          //  说明小于0
          if (cur + step < record) {
            // 说明移动多了，这时候我们改变移动距离，直接移动到指定位置即可
            el.scrollTop = record
            clearInterval(timer)
          } else {
            el.scrollTop = cur + step
          }
        } else {
          if (cur + step > record) {
            // 说明移动多了，这时候我们改变移动距离，直接移动到指定位置即可
            el.scrollTop = record
            clearInterval(timer)
          } else {
            el.scrollTop = cur + step
          }
        }

        cur += step
      }, 8)

    },

  }

}
</script>
<style lang="less">
.detail {
  .el-tree-node__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

<style lang="less" src="./index.less" scoped></style>